<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>

        <title>Lista de actividades</title>

        <style type="text/css">
            .estimadoclass .fc-event,
            .estimadoclass a,
            .estimadoclass .fc-event-inner{
                background-color: #CD5C5C;
                border-color: #CD5C5C;
                color: white;
                
            }
            .realclass .fc-event,
            .realclass a,
            .realclass .fc-event-inner{
                background-color: #32CD32;
                border-color: #32CD32;
                color: white;
                
            }

        </style>
    </h:head>
    <h:body>
        <ui:composition template="TemplatePrincipal.xhtml">
            <ui:define name="content">

                <h:form onsubmit="this.submit()">
                    <p:commandButton value="NUEVO" actionListener="#{cronogramaBean.prepararNuevo}" ajax="true" update=":form:eventDetails" oncomplete="PF('cronogramaDialog').show();"/>
                    <p:dataTable id="academiaTable" value="#{cronogramaBean.cronogramas}" var="item" widgetVar="cronogramaTable"
                                 emptyMessage="NO HAY CRONOGRAMAS REGISTRADOS">
                        <p:column>
                            <f:facet name="header">
                                <h5> <h:outputText value="ACTIVIDAD" /></h5>
                            </f:facet>
                            <h:outputText value="#{item.actividad}"/>
                        </p:column>
                        <p:column style="alignment-adjust: central">
                            <f:facet name="header">
                                <h5> <h:outputText value="FECHA INICIAL"/></h5>
                            </f:facet>
                            <h:outputText value="#{item.fechaInicial}">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </h:outputText>
                        </p:column>
                        <p:column style="alignment-adjust: central">
                            <f:facet name="header">
                                <h5> <h:outputText value="DÍAS ESTIMADOS"/></h5>
                            </f:facet>
                            <h:outputText value="#{item.diasEstimados}" style="alignment-adjust: central">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </h:outputText>
                        </p:column>
                        <p:column headerText="ACCIONES">
                            <p:commandButton value="ELIMINAR" actionListener="#{cronogramaBean.setCronograma(item)}" ajax="true">
                                <f:ajax listener="#{cronogramaBean.setAccion('remover')}"/>
                            </p:commandButton>
                            <p:commandButton value="EDITAR" actionListener="#{cronogramaBean.setCronograma(item)}" ajax="true" update=":form:eventDetails" oncomplete="PF('cronogramaDialog').show();">
                                <f:ajax listener="#{cronogramaBean.setAccion('editar')}"/>
                            </p:commandButton>


                        </p:column>
                    </p:dataTable>

                </h:form>
                <h:form>
                    <center>

                        <p:panel header="ACTIVIDADES">

                            <p:schedule id="schedule" value="#{cronogramaBean.eventModel}" widgetVar="myschedule" timeZone="GMT-6" view="month" style="width: 70%" locale="es" showWeekends="false" rightHeaderTemplate="month">
                            </p:schedule>
                        </p:panel>
                    </center>

                </h:form>
                <h:form id="form" onsubmit="this.submit();">
                    <p:dialog widgetVar="cronogramaDialog" header="NUEVO ACTIVIDAD" modal="true" resizable="false" draggable="false">
                        <h:panelGrid id="eventDetails" columns="3">
                            <h:outputLabel value="ACTIVIDAD:" style="font-weight: bold"/>
                            <p:inputText id="actividad" value="#{cronogramaBean.cronograma.actividad}"  required="true" requiredMessage="LA ACTIVIDAD ES NECESARIA"/><p:message for="actividad" display="text" showDetail="true"/>

                            <h:outputLabel value="FECHA DE INICIO:" style="font-weight: bold"/>
                            <p:calendar id="fini" value="#{cronogramaBean.dateFI}" pattern="dd/MM/yyyy" mask="true" required="true" requiredMessage="La fecha inicial es un campo necesario." locale="es" disabledWeekends="true">

                            </p:calendar><p:message for="fini" display="text" showDetail="true"/>

                            <h:outputLabel value="Día de terminacion:" style="font-weight: bold"/>
                            <p:calendar id="ffin" value="#{cronogramaBean.dateDE}" pattern="dd/MM/yyyy" mask="true" required="true" requiredMessage="La fecha de terminacion es un campo necesario." locale="es" disabledWeekends="true">

                            </p:calendar><p:message for="ffin" display="text" showDetail="true"/>

                            <p:commandButton value="CANSELAR" oncomplete="PF('cronogramaDialog').hide();" immediate="true"/>
                            <p:commandButton id="addButton" value="GUARDAR" actionListener="#{cronogramaBean.procesarAccion}" ajax="true" oncomplete="if (args &amp;&amp; !args.validationFailed){ PF('cronogramaDialog').hide();}" update="@all"/>
                        </h:panelGrid>
                    </p:dialog>

                    <p:dialog widgetVar="cronogramaElimnarDlg" header="ELIMINAR ACTIVIDAD" modal="true" resizable="false" draggable="false">
                        <h:panelGrid id="panelEliminar" columns="3">
                            <h:outputLabel value="ACTIVIDAD:" style="font-weight: bold"/>
                            <p:outputLabel value="#{cronogramaBean.cronograma.actividad}"/>

                            <h:outputLabel value="FECHA DE INICIO:" style="font-weight: bold"/>
                            <p:outputLabel value="#{cronogramaBean.cronograma.fechaInicial}" >
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </p:outputLabel>>

                            <h:outputLabel value="Día de terminacion:" style="font-weight: bold"/>
                            <p:outputLabel value="#{cronogramaBean.cronograma.diasEstimados}">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </p:outputLabel>

                            <p:commandButton value="CANSELAR" oncomplete="PF('cronogramaElimnarDlg').hide();" immediate="true"/>
                            <p:commandButton value="GUARDAR" actionListener="#{cronogramaBean.procesarAccion}" ajax="true" oncomplete="if (args &amp;&amp; !args.validationFailed){ PF('cronogramaDialog').hide();}" update="@all"/>
                        </h:panelGrid>

                    </p:dialog>
                </h:form>

                <script>
                    PrimeFaces.locales['es'] = {
                        closeText: 'Cerrar',
                        prevText: 'Anterior',
                        nextText: 'Siguiente',
                        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
                        weekHeader: 'Semana',
                        firstDay: 1,
                        isRTL: false,
                        showMonthAfterYear: false,
                        yearSuffix: '',
                        timeOnlyTitle: 'Sólo hora',
                        timeText: 'Tiempo',
                        hourText: 'Hora',
                        minuteText: 'Minuto',
                        secondText: 'Segundo',
                        currentText: 'Fecha actual',
                        ampm: false,
                        month: 'Mes',
                        week: 'Semana',
                        day: 'Día',
                        allDayText: 'Todo el día'
                    };

                </script>

                <style type="text/css">
                    .value {
                        width: 1000px;
                    }
                </style>

            </ui:define>
        </ui:composition>
    </h:body>
</html>

